Hice un formulario que vincula un botón con un atributo pero no oculta el parent("form")
pero cuando intento esto funciona
$($("[editFormContent]").attr("editFormContent")).click(function(e) { e.preventDefault(); alert(); });No sé cuál es el problema con este código.
$($("[editFormContent]").attr("editFormContent")).click(function(e) { e.preventDefault(); $(this).parent("form").hide(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main container"> <div class="breadcrumb col-100"> <h2>UserProfile @<?=$_SESSION['Dname']?></h2> <small><i class="fal fa-home"></i> Home \ Settings \ Account</small> </div> <div class="card col-100 "> <form method="post" editFormContent="#edit"> <table class="col-100"> <tr> <th width="50%"></th> <th width="50%"></th> </tr> <tr> <label> <td>First Name</td> <td> <span class="editFormSpan">Fname Lname</span> </td> </label> </tr> <tr> <td colspan="2"><a href="" id="edit">Edit</a></td> </tr> </table> </form> </div> </div>Por favor ayúdame gracias
.parent() solo selecciona el padre directo (un nivel más arriba). .parents() seleccionará todo el camino hacia arriba en la cadena de antepasados.
$($("[editFormContent]").attr("editFormContent")).click(function(e) { e.preventDefault(); $(this).parents("form").hide(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main container"> <div class="breadcrumb col-100"> <h2>UserProfile @<?=$_SESSION['Dname']?></h2> <small><i class="fal fa-home"></i> Home \ Settings \ Account</small> </div> <div class="card col-100 "> <form method="post" editFormContent="#edit"> <table class="col-100"> <tr> <th width="50%"></th> <th width="50%"></th> </tr> <tr> <label> <td>First Name</td> <td> <span class="editFormSpan">Fname Lname</span> </td> </label> </tr> <tr> <td colspan="2"><a href="" id="edit">Edit</a></td> </tr> </table> </form> </div> </div>También puede usar .closest() que solo seleccionará el padre más cercano que coincida en lugar de todos los padres.
$($("[editFormContent]").attr("editFormContent")).click(function(e) { e.preventDefault(); $(this).closest("form").hide(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main container"> <div class="breadcrumb col-100"> <h2>UserProfile @<?=$_SESSION['Dname']?></h2> <small><i class="fal fa-home"></i> Home \ Settings \ Account</small> </div> <div class="card col-100 "> <form method="post" editFormContent="#edit"> <table class="col-100"> <tr> <th width="50%"></th> <th width="50%"></th> </tr> <tr> <label> <td>First Name</td> <td> <span class="editFormSpan">Fname Lname</span> </td> </label> </tr> <tr> <td colspan="2"><a href="" id="edit">Edit</a></td> </tr> </table> </form> </div> </div>Solo necesita agregar una identificación a su formulario y agarrarlo con jquery, luego llamar a .hide()
formulario id="miFormulario" ....
Agregue esta etiqueta de secuencia de comandos al final del cuerpo.
<script> $(document).ready(function () { $('#edit').click(function(e){ e.preventDefault(); $('#myForm').hide(); }); }); </script>Creo que cuando usamos jquery, no hay necesidad de complicarnos la vida con selectores complicados.